<template>
    <div class="box">
        <h3>组合式API</h3>
        <p ref="pDom">
            1. 组合式api生命周期钩子函数的使用方式:
            在选项式生命周期名称前增加on关键字，以方法方式调用
        </p>
        <pre>
                import { onBeforeMount } from "vue";
                
                onBeforeMount(function(){
                console.log("LifePage 准备挂载")
            })
        </pre>
        <br>
        <p>2.onBeforeCreate,onCreated生命周期钩子函数，不存在组合式API的调用规则</p>
        <pre>组合式api中的方法直接调用，等同于选项式API created 生命周期的调用</pre>
        <pre>{{ types }}</pre>
        
    </div>
</template>
<script setup>
import { onBeforeMount, onMounted,ref } from 'vue'
import api from '@/index/api'
const pDom=ref()
    onBeforeMount(function(){
        console.log('LifePage 准备被挂在');
        console.log(pDom.value);
        
        
    })
    onMounted(function () {
        console.log('LifePage 已经挂载');
        console.log(pDom.value);

    })  
    let types=ref([])
    async function initTypes(){
        types.value=await api.loadTypes()
    }
initTypes()
</script>
<style lang="sass" scoped>

</style>